<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素操作</title>
</head>
<body>
    <div id="outer" class="outer">
        <div id="inner1" class="inner">inner1</div>
        <div id="inner2" class="inner">inner2</div>
        <div id="inner3" class="inner">inner3</div>
        <div id="inner4" class="inner">inner4</div>
    </div>
    <script>
        /**
         * Element操作(增删改查),查-获取
         **/
        //1.获取元素
        //1.通过document来获取
        //2.根据id,class,tag(标签-例如:div p等),name,querySelector(""),querySelectorAll()
        var divObjs=document.getElementsByClassName("inner");
        console.log(divObjs);
        var divObjs2=document.getElementsByTagName("div");
        console.log(divObjs2);
        //2.document的属性来获取
        //document.body,document.forms,document.images
        //在页面上插入三张图片,用document.images在控制台中打印出图片的名字
        //3.element对象方法 className,tagName()
        var outerObj=document.getElementById("outer");
        var divObj3=outerObj.getElementsByClassName("inner");
        console.log(divObj3);

        console.log(document.querySelector(".inner")); 
        console.log(document.querySelectorAll(".inner")); 

        
        var divObj3=document.querySelector("#inner3");
        divObj3.setAttribute("className","计算机2221");
        console.log(divObj3.attributes);
        //获取元素的属性:attributes,setAttribute,getAttribute,removeAttribute
        
        console.log(
        document.querySelector("#inner4").getAttribute("id")
        );
        //获取元素的样式: style
        var outerObj=document.querySelector(".outer");
        outerObj.style.backgroundColor="gray"
        var innerObj1=document.querySelector(".inner");
        innerObj1.style.width="100px";
        innerObj1.style.height="100px";
        innerObj1.style.borderRadius="50%";
        innerObj1.style.backgroundColor="red";
        //所有元素都一个属性，className,前面不需要添加style，可以为元素切换样式
        //classList html5新增的
        //length
        //add
        //remove
        //toggle
        //item
        //contains
    </script>
</body>
</html>